Telegram Group & Telegram Channel
🔧 Как правильно настроить Debounce и Throttle для оптимизации событий

Debounce и Throttle — техники управления частотой срабатывания событий в браузере.

Почему важно:

📍 Уменьшают количество вызовов функции

📍 Повышают производительность страницы

📍 Предотвращают лаги и подвисания интерфейса

Как работают:

➡️ Debounce — функция вызывается только после того, как событие перестало происходить в течение заданного времени. Подходит для поиска при вводе, ресайза окна.

➡️ Throttle — функция вызывается не чаще, чем один раз за фиксированный интервал времени. Подходит для прокрутки, скролла, отслеживания позиции.

Как внедрить:

1. Debounce — пример на JS:


function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}

window.addEventListener('resize', debounce(() => {
console.log('Resize обработан');
}, 300));


2. Throttle — пример на JS:


function throttle(fn, limit) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= limit) {
last = now;
fn(...args);
}
};
}

window.addEventListener('scroll', throttle(() => {
console.log('Scroll обработан');
}, 200));


3. Используйте готовые библиотеки, например lodash.

4. Тестируйте производительность через DevTools — уменьшение количества вызовов улучшает отзывчивость.

💡 Debounce и Throttle — простой способ повысить плавность работы интерфейса и снизить нагрузку.

🐸 Библиотека фронтендера

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM



tg-me.com/frontendproglib/6206
Create:
Last Update:

🔧 Как правильно настроить Debounce и Throttle для оптимизации событий

Debounce и Throttle — техники управления частотой срабатывания событий в браузере.

Почему важно:

📍 Уменьшают количество вызовов функции

📍 Повышают производительность страницы

📍 Предотвращают лаги и подвисания интерфейса

Как работают:

➡️ Debounce — функция вызывается только после того, как событие перестало происходить в течение заданного времени. Подходит для поиска при вводе, ресайза окна.

➡️ Throttle — функция вызывается не чаще, чем один раз за фиксированный интервал времени. Подходит для прокрутки, скролла, отслеживания позиции.

Как внедрить:

1. Debounce — пример на JS:


function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}

window.addEventListener('resize', debounce(() => {
console.log('Resize обработан');
}, 300));


2. Throttle — пример на JS:


function throttle(fn, limit) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= limit) {
last = now;
fn(...args);
}
};
}

window.addEventListener('scroll', throttle(() => {
console.log('Scroll обработан');
}, 200));


3. Используйте готовые библиотеки, например lodash.

4. Тестируйте производительность через DevTools — уменьшение количества вызовов улучшает отзывчивость.

💡 Debounce и Throttle — простой способ повысить плавность работы интерфейса и снизить нагрузку.

🐸 Библиотека фронтендера

#буст

BY Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js




Share with your friend now:
tg-me.com/frontendproglib/6206

View MORE
Open in Telegram


Библиотека фронтендера | Frontend JS JavaScript React js Angular js Vue js Telegram | DID YOU KNOW?

Date: |

The global forecast for the Asian markets is murky following recent volatility, with crude oil prices providing support in what has been an otherwise tough month. The European markets were down and the U.S. bourses were mixed and flat and the Asian markets figure to split the difference.The TSE finished modestly lower on Friday following losses from the financial shares and property stocks.For the day, the index sank 15.09 points or 0.49 percent to finish at 3,061.35 after trading between 3,057.84 and 3,089.78. Volume was 1.39 billion shares worth 1.30 billion Singapore dollars. There were 285 decliners and 184 gainers.

Newly uncovered hack campaign in Telegram

The campaign, which security firm Check Point has named Rampant Kitten, comprises two main components, one for Windows and the other for Android. Rampant Kitten’s objective is to steal Telegram messages, passwords, and two-factor authentication codes sent by SMS and then also take screenshots and record sounds within earshot of an infected phone, the researchers said in a post published on Friday.

Библиотека фронтендера | Frontend JS JavaScript React js Angular js Vue js from jp


Telegram Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
FROM USA